<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>物业费</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/pages/tenement.css" />
	</head>

	<body>
		<div id="mescroll" class="mescroll">
			<div id="app" class="content">
				<div class="pay-desc font-14 font-c-7f" v-text="hosing.neiName+hosing.buiName+hosing.eleName+hosing.roomEncode"></div>
				<div class="pay-cost">
					<div class="font-c-7f font-12 m-b-10">待缴金额</div>
					<div class="pay-content">
						<div class="pay-price">{{money}}元</div>
						<div class="pay-btn" @click="onPayment">立即缴费</div>
					</div>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="item in bills" @click="onBillDetail(item)">
						<div>
							<div class="font-16 font-c-41" v-text="item.year+ '年 - ' + item.month + '月' "></div>
							<div class="font-12 font-c-min">￥{{item.money}}元</div>
						</div>
						<span class="mui-icon mui-icon-arrowright"></span>
					</li>
				</ul>
			</div>
		</div>
		<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var mescroll;
			var wxChannel = null; // 微信支付 
			var aliChannel = null; // 支付宝支付 
			var channel = null; //支付通道 
			var hosing = null; // 用户信息
			
			mui.plusReady(function() {
				hosing = Util.getState('hosing');
				app.hosing = hosing;
				
				GetToPayTheAmount()  //获取待缴金额
				
				mescroll = new MeScroll("mescroll", {
					down: {
						auto: false,
						callback: downCallback
					},
					up: {
						callback: upCallback,
						page: {
							num: 0,
							size: 10
						},
						empty: {
							warpId: "mescroll",
							icon: "../../../images/zanwu.png",
							tip: "还没有人发布呢~",
							btntext: "",
							btnClick: null,
							supportTap: false
						},
						htmlNodata: '<p class="upwarp-nodata">-- 我也是有底线的 --</p>'
					}
				})
				
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				var seif = plus.webview.currentWebview();
				seif.setStyle({
					titleNView: {
						backgroundColor: "#FFFFFF",
						titleText: "物业费",
						splitLine: {
							height: "1px",
							color: "#EEEEEE"
						}
					}
				})
				
				plus.payment.getChannels(function(channels) {
					for (var i in channels) {
						if (channels[i].id == 'wxpay') {
							wxChannel = channels[i]
						} else {
							aliChannel = channels[i]
						}
					}
				})
				
			})
			
			function GetToPayTheAmount() { //获取待缴金额
				mui.post(Util.HTTP + 'api/Bill/GetToPayTheAmount',{
					neiID: hosing.neiID,
					buiID: hosing.buiID,
					eleID: hosing.eleID,
					roomID: hosing.roomID,
					userID: hosing.userID
				},function(res){
					if(res.code==1001){
						console.log( '金额', res.data.payTheAmount)
						app.money = res.data.payTheAmount
					}
				})
			}
			
			var app = new Vue({
				el: '#app',
				data: {
					hosing: {},
					money: '',
					bills: []
				},
				methods: {
					onPayment: function() {
						var that = this
						plus.nativeUI.actionSheet({
							cancel: "取消",
							buttons: [{
									title: '微信支付'
								},
								{
									title: '支付宝支付'
								}
							]
						}, function(e) {
							if (e.index <= 0) {
								return
							}
							that.pay(e.index)
						})
					},
					pay: function(id) {
						console.log('执行')
						if (id == 1) { // 微信支付
							channel = wxChannel
						} else { // 支付宝支付
							channel = aliChannel
						}
						// 此处调用后台接口返回订单信息  id 
						var statement = {} // 订单信息 
						plus.payment.request(channel, statement, function(result) {
							// 支付成功回调
						}, function(error) {
							// 支付失败回调
						})
					},
					onBillDetail(item) {
						mui.openWindow({
							url: 'bill-detail.html',
							id: 'bill-detail',
							waiting: {
								autoShow: false
							},
							extras: {
								year: item.year,
								month: item.month
							},
						})
					}
				}
			})
			
			
			
			function downCallback() {
				app.bills = []
				mescroll.resetUpScroll();
			}
			
			function upCallback(page) {
				mui.post(Util.HTTP + 'api/Bill/GetPaymentHistory',{
					neiID: hosing.neiID,
					buiID: hosing.buiID,
					eleID: hosing.eleID,
					roomID: hosing.roomID,
					userID: hosing.userID,
					page: page.num,
					number: page.size
				},function(res){
					if(res.code==1001){
						mescroll.endSuccess(res.data.length);
						app.bills = app.bills.concat(res.data)
						
					}else{
						mui.toast(res.message)
					}
				})
				
			}
		</script>
	</body>
</html>
